<template>
  <div class="navBarRight">
    <!-- <div class="mini" @click="minmax"></div> -->
    <div class="mini" @click="closeWindow"></div>
    <div class="windows" @click="windowChange">
      <div class="winBox" @click.stop="windowsPosition">
        <div class="item1">
          <div id="halfOnLeft"></div>
          <div id="halfOnRight"></div>
        </div>
        <div class="item2">
          <div id="moreOnLeft"></div>
          <div id="moreOnRight"></div>
        </div>
        <div class="item3">
          <div id="thirdOnLeft"></div>
          <div id="thirdOnCenter"></div>
          <div id="thirdOnRight"></div>
        </div>
        <div class="item4">
          <div id="halfOnLeft" class="item4A"></div>
          <div id="thirdOnTop"></div>
          <div id="thirdOnBottom"></div>
        </div>
        <div class="item5">
          <div id="quarterOnLeftTop"></div>
          <div id="thirdOnTop"></div>
          <div id="quarterOnLeftBottom"></div>
          <div id="thirdOnBottom"></div>
        </div>
        <div class="item6">
          <div id="moreThirdLeft"></div>
          <div id="moreThirdCenter"></div>
          <div id="moreThirdRight"></div>
        </div>
      </div>
    </div>
    <div class="close" @click="closeWindow"></div>
  </div>
</template>

<script>
import {useStore} from 'vuex'
import {getParentNode} from '@/utils'
export default {
  props:{
    close:{
      type: String,
      default: 'edge',
      require: true
    }
  },
  setup(props){
    const store = useStore()
    let flag = true // 程序窗口化/最大化 标识 true->窗口 false->最大
    const windowsPosition = e =>{
      if(!e.target.id) return
      flag = false
      let a=getParentNode(e.target,'appWindow')
      switch(e.target.id){
        case 'halfOnLeft':
          a.style.width='50%'
          a.style.height='100%'
          a.style.right='auto'
          a.style.left = 0
          break
        case 'halfOnRight':
          a.style.width='50%'
          a.style.height='100%'
          a.style.left = 'auto'
          a.style.right = 0
          break
        case 'moreOnLeft':
          a.style.width='60%'
          a.style.height='100%'
          a.style.right='auto'
          a.style.left = 0
          break
        case 'moreOnRight':
          a.style.width='40%'
          a.style.height='100%'
          a.style.left = 'auto'
          a.style.right = 0
          break
        case 'thirdOnLeft':
          a.style.width='33%'
          a.style.height='100%'
          a.style.left = 0
          a.style.right = 'auto'
          a.style.margin = 'auto'
          break
        case 'thirdOnCenter':
          a.style.width='33%'
          a.style.height='100%'
          a.style.right=0
          a.style.left = 0
          a.style.margin = 'auto'
          break
        case 'thirdOnRight':
          a.style.width='33%'
          a.style.height='100%'
          a.style.left = 'auto'
          a.style.right = 0
          a.style.margin = 'auto'
          break
        case 'thirdOnTop':
          a.style.width='50%'
          a.style.height = '50%'
          a.style.right=0
          a.style.top=0
          a.style.bottom = 'auto'
          a.style.left = 'auto'
          a.style.margin = 'auto'
          break
        case 'thirdOnBottom':
          a.style.width='50%'
          a.style.height = '50%'
          a.style.left = 'auto'
          a.style.right = 0
          a.style.top='auto'
          a.style.bottom=0
          a.style.margin = 'auto'
          break
        case 'quarterOnLeftTop':
          a.style.width='50%'
          a.style.height = '50%'
          a.style.right='auto'
          a.style.top=0
          a.style.bottom = 'auto'
          a.style.left = 'auto'
          a.style.margin = 'auto'
          break
        case 'quarterOnLeftBottom':
          a.style.width='50%'
          a.style.height = '50%'
          a.style.left = 0
          a.style.right = 'auto'
          a.style.top='auto'
          a.style.bottom=0
          a.style.margin = 'auto'
          break
        case 'moreThirdLeft':
          a.style.width='25%'
          a.style.height = '100%'
          a.style.left = 0
          a.style.right = 'auto'
          a.style.top=0
          a.style.bottom=0
          a.style.margin = 'auto'
          break
        case 'moreThirdCenter':
          a.style.width='50%'
          a.style.height = '100%'
          a.style.right=0
          a.style.top=0
          a.style.bottom = 0
          a.style.left = 0
          a.style.margin = 'auto'
          break
        case 'moreThirdRight':
          a.style.width='25%'
          a.style.height = '100%'
          a.style.left = 'auto'
          a.style.right = 0
          a.style.top=0
          a.style.bottom=0
          a.style.margin = 'auto'
          break
      }
    }
    const minmax = ()=>{
      console.log('minmax');
    }
    const windowChange=e=>{
      let a=getParentNode(e.target,'appWindow')
      if(flag){
        a.style.width='60%'
        a.style.height = '70%'
        a.style.left = 0
        a.style.right = 0
        a.style.top=0
        a.style.bottom=0
        a.style.margin = 'auto'
        flag=false
        return
      }
      a.style.width='100%'
      a.style.height = '100%'
      a.style.left = 0
      a.style.right = 0
      a.style.top=0
      a.style.bottom=0
      a.style.margin = 'auto'
      flag=true
    }
    const closeWindow=()=>{
      if(props.close==='edge'){
        store.dispatch('desktop/changeEdge')
      }
    }
    return {
      windowsPosition,
      minmax,
      windowChange,
      closeWindow
    }
  }
}
</script>

<style lang="scss" scoped>
.navBarRight{
  position: absolute;
  right: 1px;
  top: 1px;
  width: 130px;
  display: grid;
  grid-template-rows: 30px;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 15px;
  div{
    transition: all 400ms;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
  }
}
.mini{
  background-image: url(~@/assets/img/icon/ui/minimize.png);
  background-size: 45%;
}
.windows{
  background-image: url(~@/assets/img/icon/ui/maximize.png);
  background-size: 45%;
  position: relative;
  &:hover{
    .winBox{
      display: grid;
    }
  }
}
.close{
  background-image: url(~@/assets/img/icon/ui/close.png);
  background-size: 37%;
  border-radius: 4px;
  &:hover{
    background-color: #17EEDC;
    filter: invert(1);
  }
}
.winBox{
  position: absolute;
  top: 30px;
  right: -30px;
  width: 200px;
  height: 100px;
  display: none;
  z-index: 99;
  grid-template-columns: repeat(3,3.3fr);
  grid-template-rows: repeat(2,5fr);
  grid-gap: 8px;
  background-color: #fff;
  border-radius: 5px;
  padding: 8px;
  &>div{
    border-radius: 4px;
    overflow: hidden;
    display: grid;
    grid-gap: 4px;
    div{
      background: #E6E6E6;
      &:hover{
        background: #d6d6d6;
      }
    }
  }
}
.item1{
  grid-template-columns: repeat(2,5fr);
}
.item2{
  grid-template-columns: 6fr 4fr;
}
.item3{
  grid-template-columns: repeat(3,3.3fr);
}
.item4{
  grid-template-columns: repeat(2,5fr);
  grid-template-rows: repeat(2,5fr);
  grid-template-areas: 'header left'
              'header right';
  .item4A{
    grid-area: header;
  }
}
.item5{
  grid-template-columns: repeat(2,5fr);
  grid-template-rows: repeat(2,5fr);
  grid-template-areas: 'header left'
              'header right';
}
.item6{
  grid-template-columns: 2.5fr 5fr 2.5fr;
}
</style>